<template>
  <div>
    <!-- 最外层容器 -->
    <el-container>
      <!-- 顶栏 -->
      <el-header class="layout-header">
        <div class="login-user">
          <span class="welcome">欢迎回来，<b>{{loginInfo.username}}</b>！</span>
          <el-avatar shape="square" size="medium" :src="loginInfo.avatar"></el-avatar>
        </div>
        <h1>学茶商城运营管理平台</h1>
      </el-header>
      <!-- 下半部分的容器 -->
      <el-container class="layout-body">
        <!-- 左侧边栏 -->
        <el-aside class="layout-aside">
          <el-menu
              router
              :default-active="$router.currentRoute.path"
              class="el-menu-vertical-demo"
              background-color="#3a4856"
              text-color="#fff"
              active-text-color="#fff">
            <!-- 主页 -->
            <el-menu-item index="/admin/index">
              <i class="el-icon-s-home"></i>
              <span>主页</span>
            </el-menu-item>
            <!-- 账号管理 -->
            <el-submenu index="2">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>账号管理</span>
              </template>
              <el-menu-item index="2-1">
                  <i class="el-icon-location"></i>
                  <span>用户管理</span>
              </el-menu-item>
              <el-menu-item index="2-2">
                <i class="el-icon-location"></i>
                <span>登录日志</span>
              </el-menu-item>
            </el-submenu>
            <!-- 内容管理 -->
            <el-submenu index="3">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>内容管理</span>
              </template>
              <el-menu-item index="3-1">
                <i class="el-icon-location"></i>
                <span>类别管理</span>
              </el-menu-item>
              <el-menu-item index="3-2">
                <i class="el-icon-location"></i>
                <span>文章管理</span>
              </el-menu-item>
            </el-submenu>
            <!-- 商城管理 -->
            <el-submenu index="4">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>商城管理</span>
              </template>
              <el-menu-item index="/admin/mall/category/add-new">
                <i class="el-icon-location"></i>
                <span>新增类别</span>
              </el-menu-item>
              <el-menu-item index="/admin/mall/category">
                <i class="el-icon-location"></i>
                <span>类别管理</span>
              </el-menu-item>
              <el-menu-item index="4-2">
                <i class="el-icon-location"></i>
                <span>商品管理</span>
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <!-- 右侧主体 -->
        <el-main class="layout-main">
          <div class="body">
            <!-- 页面的主体部分将由其它视图组件来显示 -->
            <router-view/>
          </div>
          <div class="copyright">
            <p>Copyright &copy; 达内时代科技集团 - IT学院 - Java教学研发部</p>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style>
body {margin: 0;}
.layout-header { background: #28292e; color: #fff; }
.layout-header h1 { margin: 0; line-height: 60px; font-size: 20px; }
.layout-header .login-user { float: right; display: flex; margin-top: 12px; }
.layout-header .login-user .welcome { line-height: 36px; }
.layout-body { position: absolute; top: 60px; bottom: 0; left: 0; right: 0; }
.layout-aside { background: #3a4856; }
.layout-aside i { color: #fff !important; }
.layout-aside .el-menu { border: 0; }
.layout-main { background: #ddd; }
.layout-main .body { background: #fff; padding: 30px 30px 10px 30px; }
.layout-main .copyright p { color: #666; font-size: 11px; text-align: center; }
.el-menu-item.is-active { background: #405872 !important; }
</style>

<script>
export default {
  data() {
    return {
      loginInfo: {
        id: 0,
        username: '',
        avatar: '',
        token: '',
        authorities: []
      }
    }
  },
  methods: {
    loadLoginInfo() {
      let loginInfoString = localStorage.getItem('loginInfo');
      if (!loginInfoString) {
        this.$router.push('/login');
        return;
      }
      this.loginInfo = JSON.parse(loginInfoString);
    }
  },
  mounted() {
    this.loadLoginInfo();
  }
}
</script>